/*
    //bar-wrapper process
    <div className="viking-progress-bar" style={styles}>
      // 灰色bar-outer
      <div className="viking-progress-bar-outer" style={{ height: `${strokeHeight}px`}}>
        // theme bar-inner
        <div className=`viking-progress-bar-inner color-success` style="width:30%">
          <span className="inner-text">30%</span>
        </div>
      </div>
    </div>
*/

/* bar-wrapper process */ 
.viking-progress-bar {
  width: 100%;
  box-sizing: border-box;
  // bar-outer
  .viking-progress-bar-outer {
    border-radius: $progress-border-radius;
    background-color: $progress-bg;
    overflow: hidden;
    position: relative;
  }
  // bar-outer > bar-inner
  .viking-progress-bar-inner {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center; // 让里面文字垂直居中
    height: 100%;
    border-radius: $progress-border-radius;
    line-height: 1;
    transition: $progress-bar-transition;
    .inner-text {
      color: $progress-bar-color;
      font-size: $progress-font-size;
      margin: 0 5px;  
    }
  }
  @each $key, $val in $theme-colors {
    .color-#{$key} {
      background-color: $val;
    }
  }
}